<template>
  <div class="categoriesContainer">
    <HeaderTop ref="header" :title="title" :bg="bg" :color="color">
      <router-link to="/" class="header_left" slot="left">
        <i class="iconfont icon-arrow-left"></i>
      </router-link>
      <router-link to="/search" class="header_right" slot="right">
        <i class="iconfont icon-search1"></i>
      </router-link>
    </HeaderTop>
    <section class="main" ref="main">
      <div class="cateLeft">
        <ul class="cateLeft-box">
          <li v-for="(item, index) in categories.roots" :key="index">
            <a :class="activeClass === index ? 'active' : ''" href="javascript:;" @click="switchClick(index)">{{item}}</a>
          </li>
        </ul>
      </div>
      <div class="cateRight" v-if="categories.branchs">
        <div class="cateRight-box" >
          <div class="hot">
            <h4 class="hot-title" v-if="categories.branchs[activeClass].title">{{categories.branchs[activeClass].title}}</h4>
            <ul class="hotList" v-if="categories.branchs[activeClass].branchList">
              <li v-for="(item, index) in categories.branchs[activeClass].branchList" :key="index">
                <a href="javascript:;">
                  <img :src="item.pic" />
                  <span>{{item.text}}</span>
                </a>
              </li>
            </ul>
            <div v-else="!categories.branchs[activeClass].branchList">
              <h3>暂无此分类</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import BScroll from 'better-scroll'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'

  export default {
    data () {
      return {
        title: '分类',
        bg: '#fff',
        color: '#222',
        activeClass: 0 // // 0为默认选择第一个，-1为不选择
      }
    },
    created () {
      this.$store.dispatch('getCategories', () => {
        this.$nextTick(() => {
          this.initMainHeight()
          this._initScroll()
        })
      })
    },
    mounted () {

    },
    computed: {
      ...mapState(['categories'])
    },
    components: {
      HeaderTop
    },
    methods: {
      // 初始化main的高度
      initMainHeight () {
        const main = this.$refs.main
        const docH = document.documentElement.clientHeight
        main.style.height = docH - 44 - 50 + 'px'
      },
      // 初始化滚动
      _initScroll () {
        new BScroll('.cateLeft')
        new BScroll('.cateRight')
      },
      // 点击切换侧栏的 class
      switchClick (index) {
        this.activeClass = index
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .categoriesContainer
    width 100%
    height 100%
    overflow hidden
    .main
      center(auto-x)
      max-width 1080px
      width 100%
      margin-top 44px
      margin-bottom 50px
      overflow hidden
      .cateLeft
        fl()
        width 85px
        height 100%
        overflow hidden
        bg(#f8f8f8)
        .cateLeft-box
          width 100%
          margin-bottom 50px
          li
            size(85px, 46px)
            center-text()
            bg(#f8f8f8)
            border-box()
            line-height 46px
            padding-right 1px
            a
              fz(14px)
              color(#333)
              &.active
                bg(#fff)
                color(#e93b3d)
      .cateRight
        border-box()
        width 100%
        height 100%
        padding-left 85px
        bg(#fff)
        .cateRight-box
          border-box()
          width 100%
          padding 19px 7px 0
          position relative
          z-index 11
          bg(#fff)
          .hot
            width 100%
            display none
            overflow hidden
            .hot-title
              fz(14px)
              color(#333)
              line-height 22px
              font-weight bold
            .hotList
              border-box()
              clearFix()
              padding 7px 10px 0
              li
                width 33.333%
                fl()
                a
                  width 100%
                  color(#686868)
                  img
                    size(70px, 70px)
                    center-auto()
                  span
                    display block
                    center-text()
                    fz(12px)
                    size(100%, 35px)
                    width 100%
                    line-height 35px
                    margin-top 2px
            &:nth-child(1)
              display block
</style>
